<template>
    <view class="input-number-box">
        <text
            class="btn-minus"
            :class="item.Amount <= 0 ? 'color-shadow' : ''"
            @click="changeAmount(item, item.Amount, item.Stock, -1, minNum, item.Ratio, limitBuy, item.AddNum)"
            >-</text
        >
        <view class="btn-input-box">
            <input
                :value="getAmount(item.Amount)"
                type="number"
                class="btn-input"
                @blur="changeAmount(item, item.Amount, item.Stock, 0, minNum, item.Ratio, limitBuy, item.AddNum)" />
        </view>
        <text
            class="btn-plus"
            :class="
                item.Amount * item.Ratio >= item.Stock || (item.Amount * item.Ratio >= limitBuy && limitBuy > 0)
                    ? 'color-shadow'
                    : ''
            "
            @click="changeAmount(item, item.Amount, item.Stock, 1, minNum, item.Ratio, limitBuy, item.AddNum)"
            >+</text
        >
    </view>
</template>

<script>
import utilsOld from "@/utils/utilsOld.js"
export default {
    props: {
        item: {
            type: Object,
            default() {
                return {}
            },
        },
        minNum: {
            type: Number,
            default: 0,
        },
        limitBuy: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            activeIndex: -1,
            numValue: 0,
        }
    },
    methods: {
        //获取购买数量
        getAmount(num) {
            return num
        },
        changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum) {
            const _oldAmount = item.Amount
            utilsOld.changeAmountNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum)

            if (_oldAmount !== item.Amount || type === 0) {
                const _obj = {}
                _obj.ProductId = item.ProductId
                _obj.Amount = item.Amount
                _obj.SkuId = item.SkuId
                _obj.UnitId = item.UnitId
                _obj.UnitName = item.UnitName
                _obj.ValueId = item.ValueId
                _obj.Ratio = item.Ratio
                _obj.AttributeName = item.AttributeName

                // 同步多规格要加入购物车的数据
                this.setCarListFunc(_obj)
            }
            this.$forceUpdate()
        },
        setCarListFunc(obj) {
            this.$emit("setCarListFunc", obj)
            this.$forceUpdate()
        },
    },
}
</script>
<style lang="scss" scoped>
.input-number-box {
    display: flex;
    flex-direction: row;
    justify-content: center;

    .btn-input-box {
        position: relative;
        margin: 0 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: currentColor;
            opacity: 0.1;
        }

        .btn-input {
            position: relative;
            z-index: 1;
            height: 56rpx;
            width: 80rpx;
            line-height: 1;
            border: none;
            background: transparent;
            text-align: center;
        }
    }

    .btn-minus,
    .btn-plus {
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 45rpx;
        line-height: 56rpx;
        height: 56rpx;
        width: 56rpx;
        text-align: center;
        overflow: hidden;
        border-radius: 0 8rpx 8rpx 0;

        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: currentColor;
            opacity: 0.1;
        }
    }

    .btn-minus {
        border-radius: 8rpx 0 0 8rpx;
    }

    .color-shadow {
        opacity: 0.1;
    }
}
</style>
